<template>
  <el-dialog width="70%" :title="$t('dialog.dialogAreaInfo')" v-model="dialogAreaInfoVisible">
    <table-componets-vue
      ref="dialogAreaInfo"
      :Sizes="sizes"
      :layout="layout"
      @PageChange="PageChange"
      :currentPage="query.page"
      :pageSize="query.pageSize"
      :loading="tableLoading"
      :isQuery="1 == 0"
      :tables="tables"
      :maxheight="320"
      :Select=" 'MultiSelect'"
    ></table-componets-vue>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          :size="'small'"
          type="danger"
          icon="el-icon-back"
          @click="
            dialogAreaInfoVisible = false;
            initList();
          "
        >{{ $t("table.Global_Cancel") }}</el-button>
        <el-button
          :size="'small'"
          type="primary"
          icon="el-icon-check"
          @click="confirm"
        >{{ $t("table.Global_Save") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../TableComponets.vue";
import confVue from "../../utils/conf.vue";
export default {
  emits: ["confirmEvent"],
  data() {
    return {
      dialogAreaInfoVisible: false,
      tableLoading: false,
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15
      },
      paramters: {},
      formId: 0
    };
  },
  components: { TableComponetsVue },
  methods: {
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.initList();
        this.query = {};
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.query.keyWordFieldValue = this.formId;
      this.tables = [];
      reqVue.$Post(this.query, "form/v1.0/tables", "form").then(
        function(data) {
          if (data.status) {
            data.body.operations = [];
            this.tables = data.body;
            this.$nextTick(function() {
              this.$refs.dialogAreaInfo.InitCheckBox(
                this.paramters.data,
                "tableCode"
              );
            });
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    confirm() {
      let results = this.$refs.dialogAreaInfo.tableResult;
      let pers = [];
      results.forEach(element => {
        pers.push(element);
      });
      this.$emit("confirmEvent", pers);
      this.initList();
      this.dialogAreaInfoVisible = false;
    },
    initList() {
      this.$nextTick(function() {
        this.$refs.dialogAreaInfo.dels = [];
        this.$refs.dialogAreaInfo.curs = [];
        this.$refs.dialogAreaInfo.tableResult = [];
      });
    }
  }
};
</script>
